<template>
	<view
		class="honors"
		v-if="resume"
	>
		<view class="header u-flex">
			<text class="u-flex-1 strong">荣誉介绍</text>
			<view
				v-if="!changing"
				style="margin-right: 16px;"
				@click="onclickAddHonor"
			>
				添加
			</view>
			<view v-if="resume.honors.length>0">
				<text
					v-if="!changing"
					@click="changing=true"
				>
					修改
				</text>
				<text
					v-else
					@click="updateResume"
				>
					完成
				</text>
			</view>
		</view>
		<view class="list">
			<view
				class="honor"
				v-for="(honor,i) in resume.honors"
				:key="i"
			>
				<input
					:class="changing ? 'active' : ''"
					placeholder="请输入荣誉内容"
					type="text"
					:disabled="!changing"
					v-model="honor.name"
				>
				<u-icon
					v-if="changing"
					name="trash"
					size="38"
					@click="resume.honors.splice(i,1)"
				/>
			</view>
		</view>
	</view>
</template>

<script>
import { getMyResume, putResume } from '@/api/user.js'

export default {
  data() {
    return {
      changing: false,
      resume: null,
    }
  },
  created() {
    this.loadResume()
  },
  methods: {
    /**
     * 加载简历
     */
    async loadResume() {
      this.resume = await getMyResume()
      this.resume.honors = this.resume.honors || []
      console.log(this.resume)
    },
    /**
     * 失去焦点，更新简历
     */
    async updateResume() {
      this.$loading()
      try {
        this.resume.honors = this.resume.honors.filter(item => item.name)

        await putResume(this.resume)
        this.changing = false
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()

    },
    /**
     * 点击添加简历
     */
    onclickAddHonor() {
      this.resume.honors.unshift({
        name: '',
        time: '',
        description: ''
      })
      this.changing = true
    }
  }
}
</script>

<style lang="scss" scoped>
.honors {
  .header {
    padding: 15px 0;
    font-size: $sLarge;
  }

  .list {
    .honor {
      position: relative;
      display: flex;
      padding: 12px 0;

      @include listRadius(-10px, -30px, -30px, 20px, $primary5);

      input {
        flex: 1;
        padding: 0 5px;
        margin-right: 10px;
        border-radius: $radiusSmall;

        &.active {
          border: $border1;
        }
      }
    }
  }
}
</style>
